<template>
  <div class="L-scenario-container">
    <div class="L-scenario-title">{{scenarioName}}</div>
    <div class="L-scenario-item" v-for="(item,index) in incompleteArr" :key="index">
      <van-row type="flex" align="center" justify="space-between">
        <van-col>
          <i class="iconfont icon-gengxin1" style="color: rgb(1,95,226);font-weight: bold;"></i>
          <span style="margin:0 5px">{{item.index}}.</span>
          <span>{{item.actionName}}</span>
        </van-col>
        <van-col>
          <span v-if="index===0" style="color: rgb(1,95,226);" @click="handleClick(item)" class="L-small-text">去执行</span>
          <span v-else class="L-secondary-text-color L-small-text">待执行</span>
        </van-col>
      </van-row>
    </div>
  </div>

  <div inset v-for="(item,index) in completeArr" :key="index">
    <div class="L-detail-title-row" @click="handleClick(item,true)">
      <span class="L-small-text L-primary-text-color">
        <i class="iconfont icon-yuanzhu" style="color:#1683f7"></i>
        <span style="font-weight: bold;margin-right:10px">动作</span>
        <span style="color:rgb(255,145,0)">{{item.actionName}}</span>
      </span>
      <div>
        <span class="L-small-text">{{item.states==='skip' ? '已跳过' : '已完成'}}</span>
        <i class="iconfont icon-xiayibu2"></i>
      </div>
    </div>

    <div class="L-scenario-container" style="background-color:#F5F7FA;width: 95%;margin:0 auto">
      <van-cell-group v-for="(litem,lindex) in item.lFields" :key="lindex" :class="lindex!==0 ?'L-margin-top-10' :'' ">
        <template v-for="(fitem,findex) in litem" :key="findex">
          <template v-for="(jitem,findex) in fitem.groupvalue" :key="findex">
            <DetailInput :detailItem="jitem"></DetailInput>
          </template>
        </template>
      </van-cell-group>

    </div>

  </div>

</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import DetailInput from "@/components/base/Detail/DetailItem.vue";
import { useRouter, useRoute } from "vue-router";
const router = useRouter();
const route = useRoute();

const props = defineProps({
  scenario: {
    type: Object,
    default: {},
  },
});
const scenarioName = ref("");
const incompleteArr = ref([]);
const completeArr = ref([]);

interface queryInterface{
    [key:string]:any
}

function handleClick(item,isComplete=false) {
  

  const query:queryInterface = {
    idobject:item.mainbo,
    // idobject:"activitypov",
    itemid:item.itemId,
  };

  if(isComplete) {
    const { actionId } = item;
    query['actionid'] =  actionId;
  }

  router.push({
    path: "/bizcalendarAction",
    query,
  });
}

onMounted(() => {
  scenarioName.value = props.scenario.scenarioName;
  incompleteArr.value = props.scenario.scenarioInfo.filter((item, index) => {
    item["index"] = index + 1;
    return item.ended == false;
  });

  completeArr.value = props.scenario.scenarioInfo.filter((item) => {
    return item.ended == true;
  });
});
</script>

<style scoped>
.L-scenario-container {
  padding: 10px;
}
.L-scenario-title {
  font-size: 16px;
  font-weight: bold;
  margin: 10px auto;
}

.L-scenario-item {
  background: #f5f7fa;
  padding: 15px;
  margin: 10px auto;
  border-radius: 4px;
}
</style>